<template>
  <div>
    <Form
        ref="formDynamic"
        :model="RestForm"
        :label-width="40"
        :rules="resetRules"
        style="width: 100%"
      >
        <FormItem prop="username">
          <Input
            type="text"
            v-model="RestForm.username"
            placeholder="please enter you E-maiil"
          >
            <span slot="append">@QQ.com</span>
          </Input>
        </FormItem>
        <FormItem class="resetpass" prop="code">
          <div class="code-input">
            <Input
            type="text"
            v-model="RestForm.code"
            prefix="md-mail-open"
            placeholder="please enter you E-maiil"
            class="code_email"
          >
          </Input>
          <Button
            class="reset_btn"
            type="primary"
            :disabled="!sendCodeStatus"
            @click="handleEmailcodebtn"
            >{{ sendCodeText }}</Button
          >
          </div>
       
        </FormItem>
        <FormItem prop="password">
          <Input
            type="text"
            v-model="RestForm.password"
            prefix="md-lock"
            placeholder="please enter you New-password"
          >
          </Input>
        </FormItem>
        <Button
          class="sub_btn"
          type="primary"
          @click="handleResetpassword('formDynamic')"
          >Reset</Button
        >
      </Form>
  </div>
</template>
<script>
import { Sendemails, ResetPassword}  from "@/request/api"
export default {
  data() {
    const validateEamil = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("Please enter your Eamil"));
      } else {
        if (!/^[1-9][0-9]{4,9}$/.test(value)) {
          callback(new Error("Please enter the correct format of qq number"));
        } else {
          callback();
        }
      }
    };
    return {
        RestForm: {
        username: "",
        code: "",
        password: "",
      },
      resetRules: {
        username: [{ validator: validateEamil, trigger: "blur" }],
        code: [
          { required: true, message: "please fill your code", trigger: "blur" },
          { max: 6, message: "max number 6", trigger: "blur" },
        ],
        password: [
          {
            required: true,
            message: "please fill your New_password",
            trigger: "blur",
          },
        ],
      },
      sendCodeStatus: true,
      sendCodeText: "验证码",
      totalTime: 60,
      Emailcode: "",
    }
  },
  mounted(){
    this.$bus.$on("handleReset",()=>{
       
    })
  },
  computed:{

  },
  methods:{
    // 重置密码的邮箱验证码
    async handleEmailcodebtn() {
      if (this.RestForm.username) {
        if (/^[1-9][0-9]{4,9}$/.test(this.RestForm.username)) {
          const { data: res } = await Sendemails({
            email: this.RestForm.username + "@qq.com",
          });
          this.Emailcode = res.code;
          console.log("base64解码",this.Emailcode);
          this.$Message.success("验证码发送成功! 请注意查收");
          this.sendCodeStatus = false;
          this.sendCodeText = `${this.totalTime}s`;
          this.clockTime = window.setInterval(() => {
            this.totalTime -= 1;
            this.sendCodeText = `${this.totalTime}s`;
            if (this.totalTime < 0) {
              window.clearInterval(this.clockTime);
              this.sendCodeText = "Send code";
              this.totalTime = 60;
              this.sendCodeStatus = true;
            }
          }, 1000);
        } else {
          this.$Message.error("请输入正确的邮箱格式！");
        }
      } else {
        this.$Message.error("请输入邮箱！");
      }
    },
        // 重置秘密按钮
        handleResetpassword(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          if (this.RestForm.code === this.Emailcode) {
            const { data: res } = await ResetPassword({
              username: this.RestForm.username + "@qq.com",
              password: this.RestForm.password,
            });
            if (res.code == 200) {
              this.$Message.success("修改秘密成功");
              this.$refs['formDynamic'].resetFields();
              this.RestForm.password = ""
              this.$emit("Close",false);
            } else {
              this.$Message.error("邮箱还未被注册!");
            }
          } else {
            this.$Message.error("邮箱验证码错误！");
          }
        } else {
          this.$Message.error("校验失败");
        }
      });
    },
    // 定义给父组件来使用
    handleReset(){
        this.$refs.formDynamic.resetFields();
    }
  },
}
</script>
<style lang="less" scoped>
.sub_btn {
  width: 100%;
  // margin-left: 80px;
}
.resetpass .code-input{
  display: flex;
  justify-content: space-between;
  // margin-left: 20px !important;
}
.reset_btn{

}
// .code_email {
//   width: 250px !important;
// }
</style>
